import { TinyPager } from '@opentiny/vue';
import { reactive, type VNode } from 'vue';
import { h as createVNode } from 'vue';

const defaultProps: Partial<GridProps> = {
  align: 'left',
  autoLoad: true,
  autoResize: true,
  border: false,
  cellClassName: '',
  columnMinWidth: '',
  columnWidth: '',
  columns: [],
  data: [],
  fit: true,
  footerAlign: 'left',
  footerCellClassName: '',
  footerRowClassName: '',
  headerAlign: 'left',
  headerCellClassName: '',
  headerRowClassName: '',
  height: 500,
  highlightCell: false,
  highlightCurrentColumn: false,
  highlightCurrentRow: false,
  highlightHoverColumn: false,
  highlightHoverRow: false,
  isAsyncColumn: false,
  isBeforePageChange: false,
  loading: false,
  pager: {
    component: TinyPager,
    attrs: {
      currentPage: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100],
      total: 0,
      align: 'right',
      layout: 'total, sizes, prev, pager, next, jumper',
    },
  },
  radioConfig: {
    trigger: 'cell',
  },
  selectConfig: {
    trigger: 'cell',
    checkAll: false,
    showHeader: true,
    checkStrictly: false,
    reserve: true,
  },
  seqSerial: true,
  showFooter: false,
  showHeader: true,
  showHeaderOverflow: false,
  showOverflow: true,
  showSaveMsg: false,
  size: '',
  stripe: true,
  tooltipConfig: {
    appendToBody: false,
    effect: 'dark',
    placement: 'left',
    popperClass: '',
  },
};
export function useCreateGrid(props: Partial<GridProps>) {
  // 处理对象类型属性的合并
  const gridProps = reactive<Partial<GridProps>>({
    ...defaultProps,
    ...props,
    pager: {
      ...defaultProps.pager,
      ...props.pager,
      // 为确保 currentPage 有值，使用默认值 1
      attrs: {
        currentPage: 1,
        pageSize: 5,
        pageSizes: [5, 10],
        total: 0,
        ...defaultProps.pager?.attrs,
        ...props.pager?.attrs,
      },
    },
    radioConfig: {
      ...defaultProps.radioConfig,
      ...props.radioConfig,
    },
    selectConfig: {
      ...defaultProps.selectConfig,
      ...props.selectConfig,
    },
    sortConfig: {
      ...defaultProps.sortConfig,
      ...props.sortConfig,
    },
    tooltipConfig: {
      ...defaultProps.tooltipConfig,
      ...props.tooltipConfig,
      renderContent:
        props.tooltipConfig?.renderContent ||
        function (h: typeof createVNode, content: string): VNode {
          return h('div', content);
        },
    },
  });
  return gridProps;
}
